Before we create our first rule, which will set up the background of the pages at our site, we need to create the style sheet.
Have you launched Style Master? If not, do that now. You'll notice that when the application is launched, a new window opens, called untitled. This is your style sheet.
To create a new style sheet once the application is running
1. choose from the menu
I hope that you follow the practice of creating your entire site within a root directory (folder). Any page, image, or other object within your site should be saved inside this folder. Then, when you upload your site, you just upload this root directory, and all of your site is uploaded, links, images etc. intact.
Because, as we will later learn in detail, style sheets are linked to pages, we need to make sure that any style sheets in our site also live inside the root directory of the site.
As with images, you can put them anywhere within this directory structure, but as we are going to be developing a core style sheet, applicable to the whole site, it perhaps belongs directly inside the root directory.
We can't save the style sheet until we have altered it in some way. So let's add a comment, that explains what the style sheet is for.
To make a comment
1. choose from the menu
2. in the popup menu of the dialog box that opens, choose , and click
2. Enter a comment in the text field of the comment window that opens
3. Click
Now we can save the style sheet.
To save the style sheet
1. choose from the menu
2. enter the name core-style.css and save it inside the root directory of your site
Even though it only contains a comment, you've created your first style sheet. Well done. Unlike HTML documents, style sheets don't have fancy header information, or special code to tell a browser what they are.
If you want to see the complete style sheet in Style Master, you can do so at any stage.
To see the full text version of the style sheet
1. choose from the menu
2. a palette opens containing the text of the style sheet
The last thing you should do for now is create a web page and save it in the site folder. We will use this for previewing our style sheet as we go.
Here is one that you might like to use. It features all of the HTML we will need to do these tutorials.
<HTML>
<HEAD>
<TITLE>Choux</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
</HEAD>
<BODY>
<H1>Classic Patisserie Recipes</H1>
<H2>Pastry Cream</H2>
<P>Also known as creme patissiere, this is the traditional filling
for <A HREF="fruit_tarts.html">fresh fruit tarts</A>. It is also used
to fill <A HREF="choux_puffs.html">choux puffs</A>.</P>
<H3>Ingredients</H3>
<P>2 cups milk</P>
<P>1 vanilla bean</P>
<P>6 egg yolks</P>
<P>175g castor sugar</P>
<P>50g cornflour</P>
<H3>Method</H3>
<P>Scald milk with vanilla bean. Beat egg yolks with cornflour until
thick. Pour in milk and whisk until quite smooth.</P>
<H1>More Information</H1>
<P>to contact the author, email me on
<A HREF="mailto:john@masterchef.org">john@masterchef.org</A></P>
<P>to download all my recipes in acrobat format,
<A HREF="ftp://ftp.masterchef.org/recipes.pdf">click here</A></P>
<P>for other recipes, see biodynamic recipes from
<A HREF="http://www.biodyn.nu">http://www.biodyn.nu</A></P>
</BODY>
</HTML>
You might have noticed the line in the HEAD that reads
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
We will learn about linking to style sheets in a later lesson, but for now, this web page is linked to a style sheet named core-style.css in the same folder as the HTML file. Make sure that your style sheet is called core-style.css, and that both it and the HTML file (doesn't matter what you call that) are in the same folder.
Now we've created our style sheet, it's time to create some rules. We will begin by setting up the background of our document.